<template>
	<view id="app">
		<view class="swiper">
			<u-swiper :list="list" :height="340"></u-swiper>
		</view>
		<view class="item">
			<view class="num">
				<view class="num-left">
					<text class="red">￥9.98</text>
					<text>/份</text>
					<text><s>￥4.00</s></text>
				</view>
				<view class="num-right">月销量645件</view>
			</view>
			<h3>本地现采香蕉(放熟了吃)</h3>
			<view class="center">
				香甜软糯|柔滑细腻|鲜甜美味
			</view>
			<view class="nav">
				<view class="nav-left">
					<view class="text">会员优惠</view>
					<view class="text1">
						<text class="green">券</text>
						<text>减10元</text>
					</view>
				</view>
				<view class="nav-right">领券  ></view>
			</view>
			<view class="down">
				<view class="down-left">
					<text>√</text>
					品质保证
					<text>√</text>
					支持售后
				</view>
				<view class="nav-right">领券  ></view>
			</view>
		</view>
		<h3 class="em">用户评论</h3>
		<view class="pl">
			<view class="pl-box">
				<view class="head">
					<view class="left">
						<image class="image" src="../../static/image/团购.png" mode=""></image>
					</view>
					<view class="right">
						<text>阿猫猫    2023.3.21</text><br />
						<text>评分<text class="red">♥♥♥♥♥</text></text>
					</view>
				</view>
				<view class="down">
					果香芬芳，清甜多汁，色泽诱人，商品无损坏。
				</view>
			</view>
			<view class="pl-box">
				<view class="head">
					<view class="left">
						<image class="image" src="../../static/image/团购.png" mode=""></image>
					</view>
					<view class="right">
						<text>阿猫猫    2023.3.21</text><br />
						<text>评分<text class="red">♥♥♥♥♥</text></text>
					</view>
				</view>
				<view class="down">
					果香芬芳，清甜多汁，色泽诱人，商品无损坏。
				</view>
			</view>
		</view>
		<h3 class="em">为您推荐</h3>
		
		<view class="shop">
			<view class="box"  @tap="handleViewTap">
				<view class="top">
					<image src="../../static/image/包子.png" mode=""></image>
				</view>
				<view class="center">
					<view class="black">江苏无锡香菇猪肉包子</view>
					<view class="color">
						<text>猪肉肥美</text>
						<text>|</text>
						<text>鲜甜嫩软</text>
						<text>|</text>
						<text>多汁美味</text>
					</view>
				</view>
				<view class="item-box">
					<view class="text">多汁鲜嫩</view>
					<view class="text1">
						<text class="green">券</text>
						<text>减10元</text>
					</view>
				</view>
				<view class="bottom">
					<view class="bottom-left">
						<text class="color">￥8.79</text>
						<text>/笼</text>
					</view>
					<view class="bottom-right">
						<u-icon name="plus-circle-fill" color="#6ac492" size="52"></u-icon>
					</view>
				</view>
			</view>
			<view class="box"  @tap="handleViewTap1">
				<view class="top">
					<image src="../../static/image/包子.png" mode=""></image>
				</view>
				<view class="center">
					<view class="black">江苏无锡香菇猪肉包子</view>
					<view class="color">
						<text>猪肉肥美</text>
						<text>|</text>
						<text>鲜甜嫩软</text>
						<text>|</text>
						<text>多汁美味</text>
					</view>
				</view>
				<view class="item-box">
					<view class="text">多汁鲜嫩</view>
					<view class="text1">
						<text class="green">券</text>
						<text>减10元</text>
					</view>
				</view>
				<view class="bottom">
					<view class="bottom-left">
						<text class="color">￥8.79</text>
						<text>/笼</text>
					</view>
					<view class="bottom-right">
						<u-icon name="plus-circle-fill" color="#6ac492" size="52"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		<view class="foot">
			<view class="left">
				<image src="../../static/image/星星.png"></image>28
				<image src="../../static/image/订购.png">16
			</view>
			<view class="right">
				<button @click="nav()">加入购物车</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
			data() {
				return {
					list: [{
							image: 'https://img1.baidu.com/it/u=1066150290,1612459096&fm=253&fmt=auto&app=120&f=JPEG?w=929&h=500',
							title: '1'
						},
						{
							image: 'https://img2.baidu.com/it/u=1766992653,1125916224&fm=253&fmt=auto&app=120&f=JPEG?w=936&h=500',
							title: '2'
						},
						{
							image: 'https://media.9game.cn/gamebase/ieu-gdc-pre-process/images/20231116/10/26/724a676369a42bef3f7d924e3e00a1f5.jpg',
							title: '3'
						}
					],
				}
			},
			methods: {
				nav() {
					uni.switchTab({
						url: '/pages/shop/shop'
					})
				}
			}
		}
</script>

<style lang="scss" scoped>
	#app{
		background-color: #f9f9f9;
	}
	.item{
		background-color: #fff;
		margin: 0 auto;
		width: 90%;
		.num{
			width: 100%;
			display: flex;
			.num-left{
				width: 70%;
				.red{
					color: #d45f57;
					font-weight: 600;
					font-size: 20px;
				}
				text{
					color: #9b9b9b;
					font-weight: 600;
					font-size: 14px;
					s{
						color: #cccccc;
						font-size: 12px;
					}
				}
			}
			.num-right{
				color: #b7b7b7;
				font-weight: 600;
			}
		}
		h3{
			margin: 10px 0;
		}
		.center{
			margin: 10px 0;
			font-size: 12px;
			color: #b9b9b9;
		}
		.nav{
			margin: 10px 0;
			display: flex;
			width: 100%;
			.nav-left{
				display: flex;
				width: 84%;
				.text{
					width: 26%;
					font-size: 12px;
					text-align: center;
					border: 2px solid #ee8c48;
					color: #ee8c48;
					margin-right: 5px;
				}
				.text1{
					width: 26%;
					font-size: 12px;
					border: 2px solid #4fbf7b;
					color: #4fbf7b;
					
					.green{
						display: inline-block;
						color: #fff;
						width: 30%;
						text-align: center;
						margin-right: 5px ;
						background-color: #4fbf7b;
					}
				}
			}
		}
		.down{
			display: flex;
			width: 100%;
			.down-left{
				width: 84%;
				color: #e2b61f;
				text{
					text-align: center;
					font-size: 12px;
					display: inline-block;
					width: 20px;
					height: 20px;
					border: 2px solid #e2b61f;
					border-radius: 500px;
					
				}
			}
		}
	}
	.em{
		margin: 10px 0;
		text-indent: 1.5em;
	}
	.pl{
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		width: 90%;
		.pl-box{
			padding: 10px;
			width: 48%;
			background-color: #ffffff;
			border-radius: 10px;
			.head{
				display: flex;
				justify-content: space-around;
				width: 100%;
				.left{
					.image{
						margin-top: 10rpx;
						width: 6vh;
						height: 6vh;
						margin-right: 10rpx;
					}
				}
				.right{
					width: 78%;
					.red{
						color: #d45f57;
					}
				}
			}
			.down{
				font-size: 14px;
			}
		}
	}
	
	.shop {
		padding: 0 20px;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-bottom: 100rpx;
		.box {
			width: 48%;
			display: flex;
			flex-wrap: wrap;
			background-color: #fff;
	
			.top {
				width: 100%;
	
				image {
					width: 100%;
					height: 150px;
				}
			}
	
			.center {
				width: 100%;
	
				.black {
					font-size: 16px;
					font-weight: 600;
				}
	
				.color {
					color: #a7a7a7;
					font-size: 12px;
	
					text {
						margin-right: 4px;
					}
				}
			}
	
			.item-box {
				display: flex;
				width: 100%;
				font-size: 24rpx;
				.text {
					margin-right: 4px;
					display: block;
					width: 40%;
					border: 3px solid #f09a5f;
					border-radius: 4px;
					text-align: center;
					color: #f09a5f;
					font-size: 14px;
				}
	
				.text1 {
					text-align: center;
					display: block;
					width: 40%;
					border: 3px solid #4fbf7b;
	
					.green {
						background-color: #4fbf7b;
						color: #fff;
					}
	
					text {
						color: #4fbf7b;
					}
				}
			}
	
			.bottom {
				display: flex;
				justify-content: space-between;
				width: 100%;
	
				.bottom-left {
					width: 50%;
	
					.color {
						color: #f0a16b;
						font-weight: 600;
						font-size: 16px;
					}
	
					text {
						color: #aeaeae;
					}
				}
	
				.bottom-right {
					width: 30%;
	
					.button {
						width: 50px;
						height: 50px;
						border-radius: 50%;
						text-align: center;
						background-image: linear-gradient(#62bf8c, #96e4b9);
						color: #fff;
					}
				}
			}
		}
	}
	.foot{
		position: fixed;
		bottom: 0;
		display: flex;
		width: 100%;
		background-color: #fff;
		.left{
			display: flex;
			width: 40%;
			padding: 0 20px 0;
			line-height: 50px;
			image{
				width: 3vh;
				height: 3vh;
				padding-top: 26rpx;
				margin-left: 10rpx;
			}
		}
		.right{
			width: 55%;
			button{
				background-image: linear-gradient(#78e1a7, #51c484);
				color: #fff;
				border-radius: 50px;
			}
		}
	}
</style>